"use client";
import React, {useState} from "react";
import {Box, Group, Tabs, TabsList, TabsTab, TabsPanel, Divider} from "@mantine/core";
import {IconLine, IconCircle, IconAffiliate} from "@tabler/icons-react";
import classes from "./page.module.css";

import {IpdSimuHeader} from "@/components/IpdSimuSteps/IpdSimuHeader";
import {IpdSimuStepsCheck} from "@/components/IpdSimuStepsCheck/IpdSimuStepsCheck";
import {IpdGraph} from "@/components/IpdGraph/IpdGraph";

import {SliceConfig} from "./components/Functions/SliceConfig";
import {SeprateAnalysis} from "./components/Functions/SeprateAnalysis";
import {ConnectAnalysis} from "./components/Functions/ConnectAnalysis";
import {ExportNodeEdge} from "./components/Tables/ExportNodeEdge";
import {NodeTable} from "./components/Tables/NodeTable";
import {EdgeTable} from "./components/Tables/EdgeTable";
import {mockCy} from "./components/mocks/mockCy";

export default function Page() {
  const [isLocked, setIsLocked] = useState(false);

  return (
    <>
      {/* 第一层：顶部信息和导航 */}
      <Box className={classes.box}>
        <IpdSimuHeader
          stepName={"第一步：网络调整"}
          backwardEnable={false}
          backwardLink={""}
          forwardEnable={isLocked}
          forwardLink={"/ipdv2/tools/relay-simulation/step2"}
        />
      </Box>
      {/* 第二层：快捷操作 */}
      <Box className={classes.top}>
        <Group justify="space-between">
          <Group gap="xs">
            {/* 切片配置 */}
            <SliceConfig disabled={isLocked} />
            {/* 裂点分析 */}
            <SeprateAnalysis disabled={isLocked} />
            {/* 直连分析 */}
            <ConnectAnalysis disabled={isLocked} />
            {/* 纵向分割线 */}
            <Divider orientation="vertical" />
            {/* 导出最新网络数据 */}
            <ExportNodeEdge />
          </Group>
          <IpdSimuStepsCheck isChecked={isLocked} setIsChecked={setIsLocked} />
        </Group>
      </Box>
      {/* 第三层：页面主体内容 */}
      <Box>
        <Tabs color="violet" defaultValue="nodes">
          <TabsList>
            <TabsTab value="nodes" leftSection={<IconCircle size={14} stroke={2} />}>
              节点表
            </TabsTab>
            <TabsTab value="edges" leftSection={<IconLine size={14} stroke={2} />}>
              局向表
            </TabsTab>
            <TabsTab value="graph" leftSection={<IconAffiliate size={14} stroke={2} />}>
              拓扑图
            </TabsTab>
          </TabsList>

          <TabsPanel value="nodes">
            <NodeTable disabled={isLocked} />
          </TabsPanel>
          <TabsPanel value="edges">
            <EdgeTable disabled={isLocked} />
          </TabsPanel>
          <TabsPanel value="graph">
            <IpdGraph elements={mockCy} />
          </TabsPanel>
        </Tabs>
      </Box>
    </>
  );
}
